<template>
<div>
    <cityheader></cityheader>
    <citysearch :cities="cities"></citysearch>
    <citylist :hot="hotCities" :cities="cities" :zimu="zimu"></citylist>
    <cityAlphbet :cities="cities" @change="handlechange"></cityAlphbet>
</div>
</template>

<script>
import cityheader from './components/cityheader'
import citysearch from './components/citysearch'
import citylist from './components/citylist'
import cityAlphbet from './components/cityAlphabet'
import axios from 'axios'
export default {
  name: 'City',
  data() {
    return {
      hotCities:[],
      cities:{},
      zimu:"",
    }
  },
  components:{
      cityheader,
      citysearch,
      citylist,
      cityAlphbet,
  },
  methods: {
     cityjsonget(){
     axios.get('api/city.json').then(this.getsucc)
     },
     getsucc(msg){
       if(msg.data.ret){
         const data=msg.data.data
         this.hotCities=data.hotCities
         this.cities=data.cities
       }
     },
     handlechange(zimu){
       this.zimu=zimu
     }
  },
  mounted(){
    this.cityjsonget()
  }
}
</script>

<style scoped>

</style>